:root {
    font-size: 32px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    font-family: Helvetica, Arial, sans-serif;
}

#container {
    width: 600px;
}

h1 {
    margin: 0;
    letter-spacing: -2px;
}

span {
    display: inline-block;
    overflow: hidden;
    position: relative;
    top: 0.8rem;
    animation: 0.3s swift-up ease-in-out var(--delay) forwards;
    /* background-color: #66666680; */
}

i {
    font-style: normal;
    position: relative;
    top: 2.5rem;
    animation: 0.5s swift-up ease-in-out var(--delay) forwards;
}

@keyframes swift-up {
    to {
        top: 0rem;
    }
}

p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.3rem;
    position: relative;
    top: 0.8rem;
    opacity: 0;
    /* 段落平滑上升 */
    animation: 0.5s swift-up ease-out forwards, 0.5s fade-in ease-out forwards;
    animation-delay: 0.8s;
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}
